"use strict";
// 图像预加载---无代理模式的情况
class GetImage {
    setSrc(url) {
        const imgNode = document.createElement('img'); // 真实创建的img标签
        document.body.append(imgNode);
        imgNode.src = './loading.gif'; // 加载图片初始化为
        const img = new Image(); // 用于预加载的img对象
        setTimeout(() => {
            img.src = url; // 假设加载完这个图片需要3秒
        }, 3000);
        img.onload = () => {
            imgNode.src = img.src;
        };
    }
}
// 测试用例
let getImage = new GetImage();
getImage.setSrc('./img1.png');
// 图像预加载---代理模式的情况
class SetImage {
    setSrc(url) {
        const imgNode = document.createElement('img'); // 真实创建的img标签
        imgNode.src = url;
        document.body.append(imgNode);
        return imgNode;
    }
}
class ProxyImage {
    setSrc(url) {
        const img = new Image(); // 用于预加载的img对象
        const proxyGetImage = new SetImage(); // 内部存在一个代理对象
        const imgNode = proxyGetImage.setSrc('./loading.gif');
        setTimeout(() => {
            img.src = url; // 假设加载完这个图片需要4秒
        }, 4000);
        img.onload = () => {
            imgNode.src = url;
        };
    }
}
// 测试用例
let proxyImage = new ProxyImage();
proxyImage.setSrc('./img1.png');
// 使用代理模式合并操作
function handleValue(data) {
    console.log('在这里可以执行一些重逻辑和耗时逻辑，例如ajax请求，数据有：', data);
}
// 代理处理函数---返回一个闭包函数
const proxyHandleValue = (function () {
    let timer = undefined;
    let store = []; // 存储数据
    return function (data) {
        store.push(data);
        if (timer) { // 如果仍在计时那就不执行后面的逻辑
            return;
        }
        timer = setTimeout(() => {
            handleValue(store.join(',')); // 转发给目标对象
            clearTimeout(timer);
            timer = undefined;
            store = []; // 清空缓存
        }, 4000); // 假设每过4秒执行一次合并操作
    };
})();
// 测试用例，需要结合index.html
const checkboxes = document.getElementsByTagName('input');
for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function () {
        if (this.checked) {
            proxyHandleValue(this.id); // 将操作给代理对象处理
        }
    });
}
// 可以看到数据操作被每隔4秒进行了合并处理
// 使用代理模式缓存处理运算--->计算和（假设为这里要进行复杂的运算，甚至是递归）
function getSum(...params) {
    let sum = 0;
    console.log('表示真正开始计算和。');
    for (let i = 0; i < params.length; i++) {
        sum += params[i];
    }
    return sum;
}
// 生成代理函数
function GetProxyOfGetSum() {
    const cache = {};
    return function (...params) {
        let key = params.join(',');
        if (key in cache) { // 缓存检测
            return cache[key];
        }
        let res = getSum.apply(this, params);
        cache[key] = res;
        return res;
    };
}
// 测试用例
const proxyGetSum = GetProxyOfGetSum();
console.log(proxyGetSum(1, 2, 3, 4, 5)); // 真正产生计算
console.log(proxyGetSum(1, 2, 3, 4, 5)); // 代理对象直接返回
// 通过高阶函数创建动态代理模式
function createProxyFactory(callback) {
    const cache = new Map(); // 缓存使用的哈希表
    return function (...params) {
        const argsKey = Array.prototype.join.call(params, ','); // 用参数字符串做key
        if (cache.has(argsKey)) {
            return cache.get(argsKey);
        }
        const result = callback.apply(this, params); // 如果没有出现过，把请求委托给目标对象（计算方法）
        cache.set(argsKey, result); // 缓存计算结果
        return result;
    };
}
// 测试用例
function mult(...params) {
    let res = 1;
    console.log('表示真正开始计算乘。');
    for (let i = 0; i < params.length; i++) {
        res = res * params[i];
    }
    return res;
}
function plus(...params) {
    let sum = 0;
    console.log('表示真正开始计算和。');
    for (let i = 0; i < params.length; i++) {
        sum += params[i];
    }
    return sum;
}
const proxyMult = createProxyFactory(mult); // 返回代理累加函数
const proxyPlus = createProxyFactory(plus); // 返回累加乘积函数
console.log(proxyPlus(1, 2, 3, 4, 5)); // 真正计算
console.log(proxyPlus(1, 2, 3, 4, 5)); // 返回缓存
console.log(proxyMult(1, 2, 3, 4)); // 真正计算
console.log(proxyMult(1, 2, 3, 4)); // 返回缓存
